<template>
  <div>
    <px-dialog v-model="visible" class="equip-dialog-wrap" title="添加设备" width="1280px" @open="openDialog" @close="closeEquipDialog">
      <div class="equip-dialog-content">
        <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
          <px-row :gutter="16">
            <px-col :span="8">
              <px-form-item label="设备编号/名称">
                <px-input
                  v-model="queryParams.value"
                  placeholder="设备编号/名称"
                  maxlength="50"
                  clearable
                  @blur="queryParams.value = $event.target.value.trim()"
                  @keyup.enter="queryTable"
                >
                  <template #suffix>
                    <px-icon style="cursor: pointer" @click="queryTable">
                      <search />
                    </px-icon>
                  </template>
                </px-input>
              </px-form-item>
            </px-col>
            <px-col :span="6">
              <div class="equip-dialog-btn">
                <px-button type="primary" @click="queryTable">查询</px-button>
                <px-button @click="resetTable">重置</px-button>
              </div>
            </px-col>
          </px-row>
        </px-form>
        <px-table ref="EquipTableRef" :data="tableData" class="equip-table" size="small" height="400" border @selection-change="selectionChange">
          <px-table-column type="selection" width="40" align="center" />
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="queryTable"
        />
        <div style="margin-top: 16px; text-align: right">
          <px-button @click="closeEquipDialog">取消</px-button>
          <px-button type="primary" @click="handleSubmit">确定</px-button>
        </div>
      </div>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed } from "vue";
import { PxMessage } from "px-ui";
import { queryEquipLedger } from "@/api/equip/archive";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeEquipDialog", "changeEqpIds"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "className", "categoryId", "typeId", "modelId"]);
const visible = computed(() => props.dialogVisible);
// 页面本身的值
const state = reactive<any>({
  queryParams: {
    value: "",
    pageNum: 1,
    pageSize: 10
  },
  tableColumns: [
    { prop: "eqpId", label: "设备编号", minWidth: "160", showOverflowTooltip: true },
    { prop: "eqpName", label: "设备名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "80", showOverflowTooltip: true },
    { prop: "systemNameAll", label: "系统", minWidth: "120", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "120", showOverflowTooltip: true },
    { prop: "positionNameAll", label: "设备位置", minWidth: "160", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  EquipTableRef: null,
  selectTable: []
});
const { queryParams, tableColumns, tableData, total, EquipTableRef, selectTable } = toRefs(state);
// 查询设备列表
const queryTable = async () => {
  queryParams.value.className = props.className;
  queryParams.value.categoryId = props.categoryId;
  queryParams.value.typeId = props.typeId;
  queryParams.value.modelId = props.modelId;
  const params = queryParams.value;
  const data = await queryEquipLedger(params);
  tableData.value = data.data || [];
  total.value = data.total;
};
// 重置筛选条件和设备列表
const resetTable = async () => {
  queryParams.value.value = "";
  queryTable();
};
// 表格多选框选中
const selectionChange = (val: any) => {
  selectTable.value = val;
};
// 确定选择设备
const handleSubmit = () => {
  if (selectTable.value && selectTable.value.length === 0) {
    PxMessage.warning("请选择设备");
    return;
  }
  emits("closeEquipDialog");
  emits("changeEqpIds", selectTable.value);
};

// 打开弹窗
const openDialog = () => {
  selectTable.value = [];
  queryParams.value = {
    value: "",
    pageNum: 1,
    pageSize: 10
  };
  queryTable();
};
// 关闭弹窗
const closeEquipDialog = () => {
  emits("closeEquipDialog");
};
</script>
<style lang="scss" scoped>
.equip-dialog-wrap {
  .equip-dialog-content {
    :deep(.px-form) {
      width: 100%;

      .px-form-item {
        width: 100%;
        margin-right: 0;

        .px-input {
          width: 100%;
        }

        .px-select {
          width: 100%;
        }

        .px-select-v2 {
          width: 100%;
        }
      }
    }

    .equip-dialog-btn {
      :deep(.px-button + .px-button) {
        margin-left: 8px;
      }
    }

    .equip-table {
      --px-table-border-color: #dfdfdf;

      :deep(.px-table__header) {
        thead {
          tr {
            background-color: #e7eefb !important;

            th {
              font-size: 13px;
              font-weight: bold;
              color: #000;
              background-color: #e7eefb !important;
            }
          }
        }
      }
      :deep(.px-table__cell) {
        padding: 0;
        height: 36px;
        line-height: 36px;

        .cell {
          height: 36px;
          line-height: 36px;
        }
      }
    }

    :deep(.px-pagination) {
      right: 32px;
    }
  }
}
</style>
